<template>
    <swiper-container ref="swiperEl" class="page-box" :init="false" :mousewheel="true">
        <swiper-slide class="h-screen bg-blue-200 flex items-center justify-center text-4xl">
            <HomeBanner :data="articles.data.items" />
        </swiper-slide>
        <swiper-slide class="h-screen bg-blue-200 flex items-center justify-center text-4xl">第二页</swiper-slide>
        <swiper-slide class="h-screen bg-blue-200 flex items-center justify-center text-4xl">
            <PageMap />
        </swiper-slide>
    </swiper-container>
</template>

<script setup>
definePageMeta({ layout: 'empty' })

const url = `https://xingapi.com/api/v1/curd/xm-articles?skip=0&limit=2`
const { data: articles, error } = await useFetch(url)

const swiperEl = ref(null)
const swiper = useSwiper(swiperEl, {
    direction: 'vertical',
    pagination: {
        clickable: true,
    }
})

onMounted(() => {
    swiperEl.value.initialize();
})
</script>

<style>
.page-box {
    height: 100vh;
}
</style>